<template>
  <div class="AIinCBI">
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          :label="$t('CbiAi.table.column1')"
          width="200">
        </el-table-column>
        <el-table-column
          prop="fileName"
          :label="$t('CbiAi.table.column2')">
        </el-table-column>
        <el-table-column
          prop="fileType"
          :label="$t('CbiAi.table.column3')">
        </el-table-column>
        <el-table-column
          :label="$t('CbiAi.table.column4')"
          width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="perviewFile(scope.row.fileName)">{{$t('CbiAi.table.btn1')}}
            </el-button>
            <el-button
              size="mini"
              type="success">
              <a :href="`../../../static/pdf/${scope.row.fileName}.pdf`" :download="scope.row.fileName">{{$t('CbiAi.table.btn2')}}</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="iframeBox" v-show="centerDialogVisible">
      <el-button type="info" size="mini" @click="centerDialogVisible = false">{{$t('CbiAi.table.btn3')}}</el-button>
      <iframe src='' width='100%' height='100%' class="iframePdf" frameborder="0" scrolling="no"></iframe>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: "AIinCBI",
    data(){
      return {
        tableData: [{
          fileName: 'DCG智能定价模型',
          fileType: '.PDF'
        }, {
          fileName: 'SMB库存估计模型',
          fileType: '.PDF'
        }, {
          fileName: '客户价值模型',
          fileType: '.PDF'
        }, {
          fileName: '中国区大客户PC销量预测_reportForCBI',
          fileType: '.PDF'
        }],
        centerDialogVisible: false
      }
    },
    computed: {
      ...mapGetters([
        'permission_routers',
        'sidebar'
      ])
    },
    watch: {
      'sidebar.opened': function () {
        this.iframeResize()
      }
    },
    methods:{
      perviewFile(fileName){
        this.centerDialogVisible = true
        let iframePdf= document.getElementsByClassName('iframePdf')[0]
        iframePdf.src= `../../../static/pdf/${fileName}.pdf`
        this.iframeResize()
      },
      iframeResize(){
        setTimeout(() => {
          let iframeBox= document.getElementsByClassName('iframeBox')[0]
          if(this.sidebar.opened){
            iframeBox.style.width= '84%'
          }else{
            iframeBox.style.width= '95%'
          }
        }, 0)
      }
    }
  }
</script>

<style scoped lang="scss">
  .AIinCBI{
    .title{
      color:#333;
      margin-bottom: 30px;
      font-size:20px;
      font-weight:bold;
    }
    .el-card{
      height:55vh;
    }
    .iframeBox{
      position:absolute;
      top:9vh;
      z-index:10;
      height:88%;
      overflow:hidden;
      .iframePdf{
        margin-top: 4px;
      }
    }
  }
</style>
